<template>
  <div>
    <nav>
      <!-- 返回上一页按钮 -->
      <van-icon
        class="goback"
        name="arrow-left"
        @click="onClickLeft"
      />
      <!-- 搜索框 -->
      <van-search
        class="btn"
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @keyup="onKeyup"
        @keyup.enter="onSearchclick"
      >
        <template #action>
          <div @click="onSearchClick">搜索</div>
        </template>
      </van-search>
    </nav>
    <!-- 模糊查询列表 -->
    <div
      v-if="value"
      class="wrapper"
    >
      <div
        class="search-keys"
        v-for="item in suggestionList"
        :key="item"
      >
        <van-icon
          name="search"
          size="12"
        />
        {{ item }}
        <!-- <span v-html="highlight(item)" /> -->
      </div>
    </div>
    <!-- 历史记录列表 -->
    <div
      v-else-if="searchHistory.length > 0"
      class="del-wrapper"
    >
      <!-- 历史记录全部和删除按钮 -->
      <div class="all-del">
        <span class="left">历史记录</span>
        <van-icon
          class="right"
          name="delete-o"
          @click="onDelAllSearchHistory"
        />
      </div>
      <!-- 单个历史记录和删除按钮 -->
      <div
        class="single-del"
        v-for="item in searchHistory"
        :key="item"
      >
        <span class="left">{{ item }}</span>
        <van-icon
          class="right"
          name="cross"
          @click="onDelSearchHistory(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';
export default {
  name: 'SearchPage',
  data() {
    return {
      value: '',
      searchHistory: [],
    };
  },
  computed: {
    // 集中导入model层数据
    ...mapState('suggestion', [
      'suggestionList',
    ]),
  },
  methods: {
    ...mapActions('suggestion', [
      'updateSuggestionList'
    ]),
    onClickLeft() {
      this.$router.go(-1);
    },
    onKeyup() {
      if (!this.value) {
        return;
      }
      this.updateSuggestionList(this.value);
    },
    onSearchClick() {
      // 增加历史记录
      this.addSearchHistory(this.value);
      // todo 跳转页面
    },
    onDelSearchHistory(item) {
      // 删除指定历史记录
      this.delSearchHistory(item);
    },
    onDelAllSearchHistory() {
      // 删除所有历史记录
      this.delAllSearchHistory();
    },

    // 展示搜索结果
    toSearchResult(searchValue) {
      // to view 传参 （searchValue）

      // 搜索结果页面 -->>
      // 发请求（searchValue）
    },

    // 高亮关键词
    // highlight(item) {
    //   return item.replace(this.value, `<span style="color: red;">${this.value}</span>`);
    // },

    // 封装LocalStorage增删查存函数
    // 增加元素的函数
    addSearchHistory (value) {
      // 把查到的值给初始空数组
      this.searchHistory = this.querySearchHistory();
      // 判断历史记录里面是否已存在value
      // if (this.searchHistory.some(item => item === this.value)) {
      //   return;
      // }
      // 1. 找出value的索引
      // 存在，返回元素的索引，不存在，返回-1
      const index = this.searchHistory.findIndex(item => item === this.value);
      // 2. value存在，删除数组中的value
      if (index > -1) {
        this.searchHistory.splice(index, 1);
      }
      // 3. 将this.value 插入到数组0的位置
      this.searchHistory.splice(0, 0, this.value);

      // 限制最大存储数量
      if (this.searchHistory.length > 9) {
        this.searchHistory = this.searchHistory.slice(0, 9);
      }
      // 保存新数组
      this.saveSearchHistory();
    },
    // 删除指定元素的函数
    delSearchHistory(value) {
      // 查到以后删除指定value
      this.searchHistory = this.querySearchHistory().filter(item => item !== value);
      // 保存
      this.saveSearchHistory();
    },
    // 删除所有元素的函数
    delAllSearchHistory() {
      localStorage.removeItem('searchHistory');
      this.updateSearchHistory();
    },
    // 查询所有历史记录
    querySearchHistory() {
      // 如果没有历史记录 返回空数组
      if (!localStorage.getItem('searchHistory')) {
        return [];
      }
      // 有就把字符串解析成数组并返回
      return JSON.parse(localStorage.getItem('searchHistory'));
    },
    // 保存数组的函数
    saveSearchHistory() {
      localStorage.setItem(
        'searchHistory',
        JSON.stringify(this.searchHistory)
      );
    },
    // 更新历史记录
    updateSearchHistory() {
      this.searchHistory = this.querySearchHistory();
    }
  },
  // 页面加载完成之后
  created() {
    // 更新历史记录
    this.updateSearchHistory();
  }
}
</script>

<style lang="less" scoped>
nav {
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #ebedf0;

  .goback {
    display: block;
    line-height: 54px;
    color: #999;
  }

  .search-word {
    line-height: 54px;
    font-size: 14px;
    margin-left: 10px;
  }

  .btn {
    flex: 1;
  }
}
// 模糊查询列表
.wrapper {
  padding-left: 8px;
  padding-right: 8px;

  .search-keys {
    padding: 8px;
    border-bottom: 1px solid #eff1f4;
    span {
      margin-left: 4px;
      font-size: 12px;
    }
  }
}
// 删除容器
.del-wrapper{
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  font-size: 12px;

    .all-del {
      color: #999;
      padding: 8px 0;
      border-bottom: 1px solid #eff1f4;
    }

    .single-del {
      padding: 8px 0;
      border-bottom: 1px solid #eff1f4;
    }

    .left {
      float: left;
    }

    .right {
      color: #999;
      float: right;
    }
}

</style>
